<template>
    <div v-loading="loading" class="avatar-list">
        <div v-for="(item, index) in avatarList" :key="item.id" class="avatar-box">
            <e-upload
                v-model="item.url" :showAction="false" width="104" height="104"
                @uploadSuccess="uploadAvatar(index)" class="w100 d-flex jc-center ai-center avatar-upload"></e-upload>
            <div class="d-flex ai-center jc-center mt-35">
                <e-button type="assistant" @click="editAvatar(item.id, index)">修改</e-button>
                <e-button class="ml-25" @click="deleteAvatar(item.id)">删除</e-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { systemAvatarListApi, systemAvatarDelApi, systemAvatarEditApi } from "@/api/modules/system";
const loading = ref(false);
const { proxy } = getCurrentInstance();
const avatarList = ref([]);
const getList = async() => {
    try {
        loading.value = true;
        const res = await systemAvatarListApi();
        avatarList.value = res.data;
    } finally {
        loading.value = false;
    }
}
getList();
const avatarImg = ref(null);
const uploadAvatar = async(index) => {
    console.log(avatarList.value[index]);
    try {
        const res = await systemAvatarEditApi(avatarList.value[index]);
        proxy.$modal.msgSuccess(res.message);
    } finally {
        getList();
    }
}
const editAvatar = (id, index) => {
    avatarList.value[index].url = ''
}
const deleteAvatar = async(id) => {
    try {
        const res = await systemAvatarDelApi(id);
        proxy.$modal.msgSuccess(res.message);
    } finally {
        getList();
    }
}
</script>

<style lang="scss" scoped>
.avatar-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .avatar-box {
        flex: 0 0 24%;
        margin-right: calc(4% / 3);
        margin-bottom: calc(4% / 3);
        padding: 23px;
        box-sizing: border-box;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 4px;
        transition: all .3s ease-in-out;
        &:nth-child(4n) {
            margin-right: 0;
        }
        &:hover {
            box-shadow: 0px 4px 14px 2px rgba(235,235,235,0.63);
        }
    }
    .avatar-upload {
        :deep(.upload-btn),
        :deep(.file-show) {
            overflow: hidden;
            border-radius: 50%;
        }
    }
}
</style>